<template>
	<view class="container">
		<scroll-view @scroll="wxs.sticky" :style="{height:height+'px'}" scroll-y>
			<view class="tui-page-banner">
				<image class="tui-image" src="https://www.thorui.cn/img/product/banner.jpg" mode="aspectFill"></image>
			</view>
			<view class="tui-page-group">
				<view class="tui-page-nav__list"><text>code</text></view>
				<view class="tui-page-nav__list"><text>extend</text></view>
				<view class="tui-page-nav__list"><text>thorui</text></view>
			</view>
			<view class="tui-list"></view>
			<view class="tui-list">
				<tui-button type="gray-primary" bold :size="34" @click="tips">gray-primary</tui-button>
			</view>
			<view class="tui-list">
				<tui-button type="gray-green" bold :size="34" @click="tips">gray-green</tui-button>
			</view>
			<view class="tui-list">
				<tui-button type="gray-danger" bold :size="34" @click="tips">gray-danger</tui-button>
			</view>
			<view class="tui-list">
				<tui-button type="gray-warning" bold :size="34" @click="tips">gray-warning</tui-button>
			</view>
		</scroll-view>
	</view>
</template>
<script src="./sticky.wxs" module="wxs" lang="wxs"></script>
<script>
	export default {
		data() {
			return {
				height: uni.getSystemInfoSync().windowHeight
			}
		},
		methods: {
			tips() {
				this.tui.toast("滑动看效果~")
			}
		}
	}
</script>

<style>
	.tui-page-banner {
		height: 100px;
		color: #fff;
	}

	.tui-page-banner .tui-image {
		width: 100%;
	}

	.tui-page-group {
		display: table;
		width: 100%;
		table-layout: fixed;
		position: relative;
		top: 0;
		left: 0;
	}

	.tui-page-group__position {
		position: fixed;
		z-index: 10;
	}

	.tui-page-nav__list {
		padding: 30rpx 0;
		display: table-cell;
		text-align: center;
		background-color: rgba(86, 119, 252,.1);
		color: #FFFFFF;
	}

	.tui-list {
		height: 300px;
		padding: 20rpx;
		color: #fff;
	}
</style>
